<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes enter {
            0%{
                width:10px;
                height: 10px;
                background: rgb(204, 139, 139);
                transform: translateX(-500px) rotate(720deg);
                border-radius: 50%;
            }
            50%{
                width:200px;
                height: 200px;
                background: rgb(69, 122, 67);
                transform: translateX(-300px) rotate(360deg);
                border-radius: 25%;
            }
            75%{
                width:150px;
                height: 150px;
                background: rgb(24, 62, 122);
                transform: translateX(-100px) rotate(180deg);
                border-radius: 10%;
            }
            100%{
                width:100px;
                height: 100px;
                background: rgb(60, 122, 24);
                transform: translateX(0px) rotate(0deg);
                border-radius: 0;
            }
        }
        @keyframes leave {
            0%{
                width:10px;
                height: 10px;
                background: rgb(204, 139, 139);
                transform: translateX(-200px) rotate(100deg);
                border-radius: 50%;
            }
            50%{
                width:200px;
                height: 200px;
                background: rgb(69, 122, 67);
                transform: translateX(-300px) rotate(360deg);
                border-radius: 25%;
            }
            75%{
                width:150px;
                height: 150px;
                background: rgb(24, 62, 122);
                transform: translateX(-100px) rotate(180deg);
                border-radius: 10%;
            }
            100%{
                width:100px;
                height: 100px;
                background: rgb(24, 62, 122);
                transform: translateX(0px) rotate(0deg);
                border-radius: 0;
            }
        }
        .box{
            width:100px;
            height:100px;
            background: #fc8;
            margin:100px auto;
        }
       .ani1-enter-active{
           animation: enter 2s;
           /* animation-fill-mode */
       }
       .ani1-leave-active{
           animation: leave 2s;
       }
    </style>
</head>
<body>
    <div id="app">
        <button @click="change">
            显示、消失
        </button>
        <transition name="ani1">
            <div class="box" v-if="isShow"></div> 
        </transition>
          
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                isShow:false
            },
            methods:{
                change(){
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</body>
</html>